<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>表单打印</title>
    <script type="text/javascript" src="/static/jquery-easyui-1.3.3/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/bootstrap3/css/bootstrap-theme.css"></link>
    <script type="text/javascript" src="/static/bootstrap3/js/bootstrap.min.js"></script>
    <style type="text/css">
        @page {
            size: auto; /* auto is the initial value */
            margin: 0mm; /* this affects the margin in the printer settings */
        }
    </style>
    <style type="text/css">
        body {
            background: white;
            margin: 0px;
            padding: 0px;
            font-size: 13px;
            text-align: center;
        }
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        table{
            clear: both;
            width: 80%;
            margin: 0 auto;
            text-align: center;
            border: 1px solid black;
            /* border-bottom: 1px solid #555555; */
        }
        thead td{
            font-size: 13px;
            font-weight: 600;
            height: 30px;
        }
        td{
            border: 1px solid black;
            line-height: 20px;
            height: 40px;
        }
        .box{
            width: 80%;
            margin: 30px auto 40px;
            overflow: hidden;
        }
        .box>div{
            float: left;
        }
        .box .left p{
            float: left;
            height: 50px;
        }
        .box .left div{
            clear: both;
        }
        .left{
            width: 30%;
            padding-top: 9%;
        }
        .center{
            width: 40%;
        }
        .right{
            width: 30%;
        }
        .box .left div p:nth-child(1){
            padding-top: 35px;
        }
        .box .left div p:nth-child(2){
            padding-top: 35px;
            width: 40%;
            border-bottom: 1px solid black;
        }
        .center {
            padding-top: 35px;
        }
        .center_left{
            padding-left: 0%;
        }
        .center>div{
            float: left;
            width: 50%;
        }
        .center_right{
            padding-left: 0%;
        }
        .center_right p{
            margin-left: 20px;
            float: left;
            text-align: center;
            margin-top: 15px;
            font-size: 20px;
        }
        .center_right p:nth-child(2){
            width: 35%;
        }
        .center .center_bottom{
            clear: both;
            margin-top: 25px;
            width: 90%;
            text-align: center;
            font-size: 20px;
            border-bottom: 1px solid black;
        }
        .right div p:first-child{
            /* padding-left: 40%; */
        }
        /* 底部 */
        .bottom_box{
            width: 80%;
            border:2px solid black;
            height: 6em;
            margin: 0 auto;
            border-top: none;
        }
        .contents{
            width: 20%;
            float: left;
            overflow: hidden;
            border-right: 2px solid black;
            height: 100%;
            padding-left: 1%;
            padding-top: 1%;
        }
        .contents:last-of-type{
            border-right: none;
        }
        .contents p:last-of-type{
            float: right;
            padding-top: 10%;
            padding-right: 5%;
        }
        .contents:last-of-type p:last-of-type{
            float: left;
            padding-right: 0%;
        }
        /* 调整头部 */
        .box .left div{
            display: flex;
            justify-content: flex-start;
            padding-bottom: 1em;
        }
        .box .right div{
            display: flex;
            justify-content: flex-end;
            padding-bottom: 1em;
        }
    </style>
</head>
<body>
<div class="container">
    <!--打印-->
    <button class="btn-info" id="backBtn">返回</button>
    <button class="btn-info" id="printBtn">打印</button>
</div>
<script type="text/javascript">
    $(function () {
        $(document).bind('contextmenu', function (e) {
            e.preventDefault();
        });
    });

    var tableString = localStorage.getItem("tableString");
    document.write("<div style='text-align:center;'>"+tableString+"</div>");

    var showBtn = true;
    $("#printBtn").click(function(){
        $("#printBtn").hide();
        $("#backBtn").hide();
        showBtn = false;
        window.print();
        CloseAfterPrint();
    });
    $("#backBtn").click(function(){
        window.history.back();
    });

    function CloseAfterPrint(){
        console.log("CloseAfterPrint")
        if(document.execCommand("print")){
            console.log("exec print")
            window.close();
            showBtn = true;
            $("#printBtn").show();
            $("#backBtn").show();
        }
    }

    $(document).ready(function(){
        showAndHideBtn();
    });

    function showAndHideBtn(){
        if(showBtn){
            $("#printBtn").show();
            $("#backBtn").show();
        }else{
            $("#printBtn").hide();
            $("#backBtn").hide();
        }
    }

    function DoSomeThing(){
        ClostAfterPrint();
    }

</script>
<script>
    //动态设置合计部分行合并
    //合计部分列表合并
    document.querySelector(".huoqu").setAttribute("rowspan", document.querySelector(".shuju").rows.length + 1);

</script>
</body>
</html>